<template>
  <div id="auction_index" ref="auction_index" :class="styleType == 1 ? 'index-bg':''">
    <div class="content" v-if="styleType == 1">
      <div class="input">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" placeholder="搜索拍卖商品" @click="toSearch" />
      </div>
      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in rotation" :key="index">
          <a :href="item.url">
            <img :src="item.img" />
          </a>
        </van-swipe-item>
      </van-swipe>
      <van-tabs v-model="activeName" @change="TapChange">
        <van-tab :title="item" v-for="(item, index) in tabArr" :key="index"></van-tab>
      </van-tabs>
      <template v-if="activeName == 0">
        <div class="introduce">
          <div class="title">
            <span>推荐商品</span>
            <span class="more" @click="toMore">更多</span>
          </div>
          <div class="good-list">
            <div class="good" v-for="(item, index) in recommend" :key="index" @click="toDetail(item)">
              <div class="image">
                <img :src="item.thumb" />
              </div>
              <div class="bottom">
                <div class="tit">{{ item.title }}</div>
                <div class="cash">
                  <span>起拍价</span>
                  <div class="money">
                    <span style="font-size: 12px;">{{ $i18n.t("money") }}</span><span>{{ item.start_price }}</span>
                  </div>
                </div>
              </div>
              <div class="time">{{ timestampToTime(item.end_shooting) }}结束</div>
            </div>
          </div>
        </div>
        <div class="new">
          <div class="title">
            <span>最新商品</span>
          </div>
          <div class="good-list">
            <div class="good" v-for="(item, index) in datas" :key="index" @click="toDetail(item)">
              <div class="image">
                <img :src="item.thumb" />
              </div>
              <div class="bottom">
                <div class="tit">{{ item.title }}</div>
                <div class="cash">
                  <span>起拍价</span>
                  <div class="money">
                    <span style="font-size: 12px;">{{ $i18n.t("money") }}</span><span>{{ item.start_price ?
                        item.start_price : 0
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="time">{{ timestampToTime(item.end_shooting) }}结束</div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="introduce">
          <div class="good-list">
            <div class="good" v-for="(item, index) in lsitData" :key="index" @click="toDetail(item)">
              <div class="image">
                <img :src="item.thumb" />
              </div>
              <div class="bottom">
                <div class="tit">{{ item.title }}</div>
                <div class="cash">
                  <span>起拍价</span>
                  <div class="money">
                    <span style="font-size: 12px;">{{ $i18n.t("money") }}</span><span>{{ item.start_price }}</span>
                  </div>
                </div>
              </div>
              <div class="time">{{ timestampToTime(item.end_shooting) }}结束</div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="btn" @click="toMy" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']" 
    :style="{'background-color' : (styleType == 2 ? '#991313':'#ff2c29'),'border': '1px solid' + (styleType == 2 ? '#991313':'#ff2c29')} ">
      <i class="iconfont icon-home-line6"></i>
      <div>我的</div>
    </div>

    <!--新的样式功能-->
    <div class="new-auction" v-if="styleType == 2" :style="{ 'background-color': auctionColor }">
        <swiper style="width: 100%;" :options="swiperOption">
            <swiper-slide class="swiper-itemH flex" v-for="(item, index) in rotation" :key="index">
              <div class="swiper-item" @click="slideNavTo(item.url)">
                <img
                  :src="item.img" />
              </div>
            </swiper-slide>
        </swiper>
      <div class="auction-list">
        <!-- :key="index"-->
        <block v-for="(item,index) in datas" :key="index">
          <div class="auction-item" @click="toDetail(item)">
            <div class="auction-img">
              <img
                 alt=""
                :src="item.thumb" />
              <div class="indexes">NO.{{index + 1}}</div>
            </div>
            <div class="auction-title">
              <p class="name ell">{{ item .title}}</p>
              <p class="short ell">{{ item.has_one_goods && item.has_one_goods.alias }}</p>
            </div>
            <div class="auction-time flex flex-j-sb">
              <div class="time-left">
                结束时间:{{ timestampToTime(item.end_shooting) }}
              </div>
              <div class="time-right flex-j-sb">
                <span class="circusee">围观:{{ item.browse_times | numberToWan }}人</span>
                <span class="circusee">参拍人:{{ item.auction_bid_count | numberToWan }}人</span>
              </div>
            </div>
            <div class="auction-starting flex flex-j-sb">
              <div>起拍价{{ item.start_price | numberToWan }}元</div>
              <div>每次加价{{ item.mini_markup | numberToWan }}元</div>
              <div :style="{'visibility': !item.auction_bid_records ? 'hidden':'auto'}">当前出价{{ item.auction_bid_records | numberToWan }}元</div>
            </div>
            <div class="auction-footer">
              <div class="auction-status  flex-a-c"  v-if="computingTime(item.start_shooting, item.end_shooting) === 1" >
                <div class="auction-btn end-bg">竞拍结束</div>
                <div class="auction-more end-color">拍卖状态：竞拍已结束</div>
              </div>
              <div class="auction-status flex-a-c" v-if="computingTime(item.start_shooting, item.end_shooting) === -1" >
                <div class="auction-btn">即将开拍</div>
                <div class="auction-more">拍卖状态：{{ timestampToTime(item.start_shooting) }}开拍</div>
              </div>
              <div class="auction-status flex-a-c" v-if="computingTime(item.start_shooting, item.end_shooting) === 0">
                <div class="auction-btn">立即出价</div>
                <div class="auction-more">拍卖状态：竞拍中</div>
              </div>
            </div>
          </div>
        </block>
      </div>
      <div class="footer-img" v-if="auctionImg && loadUp">
        <img :src="auctionImg" />
      </div>
      <div class="mb-50"></div>
    </div>
  </div>
</template>

<script>
import auction_index_controller from "./auction_index_controller";

export default auction_index_controller;
</script>
<style scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mb-50 {
  height: 3.125rem;
  clear: both;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
.index-bg {
  background-color: #fff;
}

#auction_index {
  // background-color: #fff;
  height: 100vh;
  position: relative;

  .content {
    padding: 0 0.75rem;
    background-color: #fff;

    .input {
      width: 16.8125rem;
      height: 1.875rem;
      background-color: #f8f8f8;
      border-radius: 0.9375rem;
      margin: 0 auto;
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;

      i {
        color: #c9c9c9;
        margin-right: 0.75rem;
        margin-left: 0.75rem;
      }

      input {
        outline: none;
        border: none;
        color: #c9c9c9;
        font-size: 12px;
      }
    }

    .my-swipe {
      a {
        width: 100%;
        height: 100%;
      }

      img {
        width: 100%;
        border-radius: 0.625rem;
      }
    }

    .introduce {
      margin-top: 1.25rem;

      .title {
        display: flex;
        justify-content: space-between;
        color: #000;
        font-size: 18px;

        .more {
          color: #999;
          font-size: 14px;
        }
      }

      .good-list {
        flex-wrap: wrap;
        margin-top: 1.25rem;
        display: flex;

        .good {
          width: 48%;
          margin-right: 4%;
          box-shadow: 0 0 0.4375rem 0 rgba(194, 194, 194, 0.31);
          border-radius: 0.3125rem;
          position: relative;
          margin-bottom: 1.25rem;

          .image {
            width: 100%;
            height: 10.625rem;

            img {
              width: 100%;
              height: 100%;
              border-top-left-radius: 0.3125rem;
              border-top-right-radius: 0.3125rem;
            }
          }

          .bottom {
            padding: 0 0.5rem;
            padding-top: 0.5rem;
            padding-bottom: 1rem;

            .tit {
              color: #333;
              text-align: left;
            }

            .cash {
              text-align: left;
              font-size: 12px;
              display: flex;
              margin-top: 1.125rem;
              line-height: 14px;

              .money {
                font-size: 16px;
                color: #ef3e3e;
              }
            }
          }

          .time {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0;
            left: 0;
            width: 5.4375rem;
            background-image: linear-gradient(270deg, #ff6333 0%, #ff2c29 100%), linear-gradient(#fe8a02, #fe8a02);
            border-radius: 0.3125rem 0 0.3125rem;
            box-sizing: border-box;
            color: #fff;
            font-size: 12px;
          }
        }

        .good:nth-child(2n) {
          margin-right: 0;
        }
      }
    }

    .new {
      .title {
        display: flex;
        justify-content: space-between;
        color: #000;
        font-size: 18px;

        .more {
          color: #999;
          font-size: 14px;
        }
      }

      .good-list {
        flex-wrap: wrap;
        margin-top: 1.25rem;
        display: flex;

        .good {
          width: 48%;
          margin-right: 4%;
          box-shadow: 0 0 0.4375rem 0 rgba(194, 194, 194, 0.31);
          border-radius: 0.3125rem;
          position: relative;
          margin-bottom: 1.25rem;

          .image {
            width: 100%;
            height: 10.625rem;

            img {
              width: 100%;
              height: 100%;
              border-top-left-radius: 0.3125rem;
              border-top-right-radius: 0.3125rem;
            }
          }

          .bottom {
            padding: 0 0.5rem;
            padding-top: 0.5rem;
            padding-bottom: 1rem;

            .tit {
              color: #333;
              text-align: left;
            }

            .cash {
              text-align: left;
              font-size: 12px;
              display: flex;
              margin-top: 1.125rem;
              line-height: 14px;

              .money {
                font-size: 16px;
                color: #ef3e3e;
              }
            }
          }

          .time {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0;
            left: 0;
            width: 5.4375rem;
            background-image: linear-gradient(270deg, #ff6333 0%, #ff2c29 100%), linear-gradient(#fe8a02, #fe8a02);
            border-radius: 0.3125rem 0 0.3125rem;
            box-sizing: border-box;
            color: #fff;
            font-size: 12px;
          }
        }

        .good:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }

  .btn {
    width: 3.5rem;
    height: 3.5rem;
    background-color: #ff2c29;
    box-shadow: 0 0 0.1875rem 0 rgba(237, 11, 11, 0.23);
    border: solid 0.0625rem #f51f27;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 70%;
    right: 0.9375rem;
    flex-wrap: wrap;
    font-size: 12px;
    flex-direction: column;
    z-index: 99;
  }

  .pop {
    padding: 0 0.75rem;

    .check {
      display: flex;
      padding-bottom: 1rem;

      input {
        flex: 1;
        border: none;
        outline: none;
        margin-left: 1rem;
        border-bottom: solid 1px #ccc;
      }
    }

    .title {
      font-size: 18px;
      padding: 1.5rem 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .bottom-btn {
      height: 2.8125rem;
      background-image: linear-gradient(#ff2c29, #ff2c29), linear-gradient(#ff590f, #ff590f);
      background-blend-mode: normal, normal;
      border-radius: 1.4375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #fff;
      margin-top: 6.25rem;
    }
  }

  //新的样式功能
  .new-auction {
    .swiper-itemH {
      width: 100%;

      .swiper-item {
        width: 100%;

        img {
          width: 100%;
          display: block;
        }
      }
    }

    .auction-list {
      margin: 0.5rem 0.75rem 0 0.75rem;

      .auction-item {
        padding: 0.5rem;
        background-color: #fff;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;

        .auction-img {
          width: 20.9375rem;
          height: 11.8125rem;
          border-radius: 0.25rem;
          overflow: hidden;
          position: relative;

          img {
            // width:100%;
            // height: auto;
            width: 20.9375rem;
            height: 11.8125rem;
            object-fit: cover;
            border-radius: 0.25rem;
          }

          .indexes {
            position: absolute;
            top: 0;
            left: 0.75rem;
            padding: 0.125rem 0.25rem;
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 0.75rem;
            font-weight: bold;
            line-height: 1.125rem;
            color: #fff;
          }
        }

        .auction-title {
          color: #1e1e1e;
          text-align: left;
          padding: 0 0 0.75rem 0;
          border-bottom: 0.0625rem solid #e7e7e7;

          .name {
            padding: 0.5rem  0;
            font-size: 0.875rem;
            line-height: 1.25rem;
          }

          .short {
            font-size: 1rem;
            font-weight: bold;
            line-height: 1.25rem;
          }
        }

        .auction-time {
          padding: 0.75rem 0 0 0;
          font-size: 0.8125rem;
          line-height: 1.125rem;
          color: #393939;

          .time-right {
            width: 45%;
            flex-wrap: wrap;
          }
        }

        .auction-starting {
          padding: 0.75rem 0 0 0;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1.125rem;
          color: #991313;
        }

        .auction-footer {
          padding: 0.75rem 0 0 0;

          .auction-status {
            flex-wrap: wrap;

            .auction-btn {
              font-size: 0.875rem;
              font-weight: 400;
              line-height: 1.25rem;
              color: #fff;
              padding: 0.375rem 1rem;
              background-color: #991313;
              border-radius: 0.25rem;
              margin: 0 0.75rem 0 0;
            }

            .auction-more {
              font-size: 0.75rem;
              line-height: 1.125rem;
              color: #991313;
            }

            .end-color {
              color: #999;
            }

            .end-bg {
              background: #999;
            }
          }
        }
      }
    }

    .footer-img {
      margin: 1.25rem 0 0 0;

      img {
        width: 100%;
        display: block;
      }
    }
  }
}

.pcStyle {
  right: 30% !important;
  transform: translateX(-50%);
}
</style>
